<template>
  <!-- 页面 -->
  <div class="dljjc_box3_x" style="min-height: 100vh">
    <m-tabs
      :value="data.tab"
      @update:value="set.tabhand"
      :list="[
        { name: 'chap1', title: '作业赛季数据库' },
        { name: 'chap2', title: '视频轴数据库' },
        { name: 'ads', title: '作业刀型榜管理' },
        { name: 'chap3', title: '文字轴数据库' },
        { name: 'chap4', title: '地牢作业数据库' },
      ]"
    />

    <template v-if="data.tab == 'chap1'">
      <component :is="chap1" :data="data" v-if="data.loading == true" />
    </template>
    <template v-if="data.tab == 'chap2'">
      <component :is="chap2" :data="data" v-if="data.loading == true" />
    </template>
    <template v-if="data.tab == 'chap3'"> 未开发 </template>
    <template v-if="data.tab == 'chap4'"> 未开发 </template>
  </div>
</template>
<script>
import { cfg } from "@/cfg/cfg.js";
import { getbossv2 } from "@/cfg/function.js";
import chap1 from "./comp/clan_chap1.vue";
import chap2 from "./comp/clan_chap2.vue";

export default {
  setup() {
    const set = {
      tabhand: (id) => {
        data.tab = id;
        cfg.router.push({
          query: {
            ...cfg.route.query,
            tab: data.tab ?? null,
          },
        });
      },
    };
    let data = reactive({
      loading: false,
      tab: cfg.route.query.tab ?? "chap1",
    });

    onMounted(async () => {
      await getbossv2();
      data.loading = true;
      data.bosslist = cfg.bosslist.slice();
      data.bosslist = [
        {
          name: null,
        },
        ...cfg.bosslist.slice(),
      ];
      set.tabhand(data.tab);
    });
    return { data, cfg, set, chap1, chap2 };
  },
};
</script>
